Fork me on GitHub

hexo next主题配置algolia搜索功能

发表于 | 分类于 | 阅读数
| 字数统计: 828

在文章数量增多了的情况下，查找文章就变得不方便了，于是需要增加一个搜索功能。

在网上搜了不少教程，内容基本大同小异，但是照着配置的过程中还是出现了一些问题，可能是不同版本的配置方法会稍有不同吧。

这里记录一下我的配置过程：

配置环境

hexo: 3.4.0

node: 4.4.3

next: 5.1.3

配置步骤

注册algolia

1.去Algolia官网进行注册，或者嫌麻烦的话直接用GitHub授权登陆也可以

2.登录之后进入dashboard，点击左侧栏的第二个indices选项，点击new index新建一个页面（页面名在后面需要用到）

3.点击左侧栏的第四个图标API Keys，这里可以看到Application ID、Search-Only API Key、Admin API Key（也是会用到的）

在hexo进行配置

别人的方法

先说一下我之前看到的别人写的方法：http://blog.csdn.net/luzheqi/article/details/52798557

1.在Hexo工程根目录下执行下面的语句。

npm install hexo-algolia --save

2.在Hexo工程根目录的_config.yml中加入如下配置，注意改成前面API Keys页面相应配置。

1
2
3
4
5
6
algolia:
  applicationID: 'your applicationID'
  apiKey: 'your apiKey'
  adminApiKey: 'your adminApiKey'
  indexName: 'your indexName'
  chunkSize: 5000

3.执行hexo clean，然后执行hexo algolia

4.在\themes\next下找到_config.yml，找到algolia，将enable修改为true

遇到的问题

照着上面的方法，前面的1，2两步没有问题，但是当我执行hexo algolia的时候出现了：

1
2
3
4
5
6
7
TMY@LAPTOP-8GEIO3HR MINGW64 /d/metang326.github.io (master)
$ hexo algolia
ERROR [Algolia] Please set an HEXO_ALGOLIA_INDEXING_KEY environment variable to enable content indexing.
ERROR >> Read https://npmjs.com/hexo-algolia#api-key for more informations.

查看了提示的帮助https://www.npmjs.com/package/hexo-algolia#security-concerns

发现它的安装命令是：npm install –save hexo-algolia

http://www.jianshu.com/p/5973c05d7100这里给出了npm install –save hexo-algolia失败的解决方法：

到Hexo的根目录，在其中找到package.json文件，修改其中的hexo-algolia属性值为^0.2.0

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.4.0"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-algolia": "^0.2.0",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-wordcount": "^2.0.1"
  }
}

此后执行hexo algolia即可

步骤小结

1.在algolia上进行注册，获取API Keys以及index名

2.到Hexo的根目录，在其中找到package.json文件，修改其中的hexo-algolia属性值为^0.2.0

3.执行npm install –save hexo-algolia

4.编辑根目录下的_config.yml文件，增加algolia相关项（对应网站的API Keys中的各项）：

1
2
3
4
5
6
algolia:
  applicationID: 'your applicationID'
  apiKey: 'your apiKey'
  adminApiKey: 'your adminApiKey'
  indexName: 'your indexName'
  chunkSize: 5000
Config Key
applicationID Your Algolia Application ID
apiKey A Search-Only API key
indexName The name of the Algolia index to use
adminApiKey Admin API Key

5.在根目录下执行hexo clean，然后执行hexo algolia

6.在\themes\next下找到_config.yml，找到如下内容，将enable修改为true，labels修改为自己需要的，如：

1
2
3
4
5
6
7
8
9
# Algolia Search
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: 输入关键字进行搜索
    hits_empty: "找不到关于  ${query} 的文章"
    hits_stats: "共找到 ${hits} 篇文章，花了 ${time} ms"

经过上述的操作后，博客中即可成功添加搜索功能。

-------------本文结束感谢您的阅读-------------